<template>
    <div>
        <div class="alert alert-warning headerAl clearfix">
            <div class="col-xs-10">
                <a href="#" class="close" data-dismiss="alert">&times;</a>
                <span>下载APP,及时回复BOSS信息，不遗漏每一个机会</span>
            </div>
            <button type="button" class="btn btn-warning col-xs-2">去下载</button>
        </div>
        <!--headerAl-->
        <div class="header">
            <div class="header-title">找工作要跟老板谈<br>BOSS直聘</div>
            <div class="search">
            	<form class="navbar-form navbar-left col-xs-10" role="search">
            		<div class="form-group">
            			<input type="text" class="form-control" placeholder="搜索职位/公司">
            			<button type="submit" class="btn btn-default">搜索</button>
            		</div>
            	</form>
            	<a class="col-xs-2"><span><img src="images/chat.png"><br></span>消息</a>
            </div>
        </div>
        <!--header-->
        <div class="contain">
            <div class="job-ls" v-for="item in categories" :key="item.id">
                <div class="job-title">
                    <img :src="item.icon">{{item.name}}
                </div>
                <ul class="job-list clearfix">
                    <li class="floatL" v-for="tag in item.tags" :key="tag.i">
                        <router-link :to="'/list/'+tag.name">{{tag.name}}</router-link>
                    </li>
                </ul>
            </div>
        </div>
		<!--contain-->
        <div class="tips">
			<p>违法和不良信息举报邮箱：jubao@kanzhun.com</p>
			<p>企业服务热线和举报投诉：400 065 5799</p>
		</div>
		<!--tips-->
		<div class="download clearfix">
			<div class="col-xs-8 clearfix"><span class="floatL"><img src="images/logo-x.png"></span><p class="floatL">找工作要跟<br>老板谈</p></div>
			<div class="col-xs-4"><button type="button" class="btn btn-default">立即注册</button></div>
		</div>
    </div>
</template>

<script>
import $ from 'jquery'
export default {
    data() {
        return {
            categories:[]
        }
    },
    created() {
	    this.getCategories()
        },
    methods: {
        getCategories(){
            this.$http.get('http://127.0.0.1:3000/api/index.json').then(result=>{
                if(result.body.status===0)
                {this.categories=result.body.message}
            })
        }
    },
}
</script>

<style lang="scss" scoped>
/*aleart*/
.headerAl {line-height:26px ; padding:5px 15px 5px 5px; margin-bottom: 0;}
.headerAl .col-xs-10 {overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; padding:0 5px;}
.headerAl .col-xs-10 .close {line-height:26px ; float: left; margin-right: 15px;}
.headerAl .col-xs-2 {border-radius:50px;padding: 2px 5px;}
/*header*/
.header {background:url(../images/home-bg.png) center center no-repeat; width: 100%; height: 196px;}
.header-title {font-size: 26px; color: #fff; text-align: center; padding-top: 30px;}
.header .search { margin-top:10px;}
.header .search .navbar-form {border: none;-webkit-box-shadow:none; margin-left: 15px;}
.header .search .form-group {background: #fff; border-radius: 50px; display: flex; justify-content: space-between;}
.header .search .form-group .form-control { display: inline-block; width: 75%; border: none; background: none; box-shadow: none;}
.header .search .form-group .btn-default {border: none; background: none; color: #5bd4c7;}
.header .col-xs-2 {display: block; color: #fff; text-align: center; margin-top: 18px; font-size: 12px;padding: 0;}
.header .col-xs-2 img {width: 20px;}
/*contain*/
.contain {padding: 10px 15px;}
.job-title {font-size: 14px; font-weight: bold; line-height: 50px;}
.job-title img { width: 50px; height: 50px; margin-right: 15px;}
.job-list li {margin: 5px 5px;}
.job-list li a {display: block; padding: 5px 12px; background: #f5f8f9; color: #7e8793; border-radius: 100px; font-size: 13px;}
.job-ls {margin-bottom: 20px;}
/*tips*/
.tips {font-size: 12px; color: #7e8793; text-align: center; margin: 10px 0;}
.download {background: #19c7c6; padding: 10px 0; margin-top: 20px;}
.download .col-xs-8 p {color: #FFFFFF; margin-left: 10px; font-size: 15px;}
.download .col-xs-8 img {width: 42px; height: 42px;}
.download .col-xs-4 .btn {border-radius: 50px; padding: 10px 18px; color: #5dd5ca; border: none;}
</style>